<!DOCTYPE html>
<html>
  <head>
    <title>Animation Components</title>
    <link rel="import" href="../../elements/animation/g-blink.html">
    <link rel="import" href="../../elements/animation/g-bounce.html">
    <link rel="import" href="../../elements/animation/g-fadein.html">
    <link rel="import" href="../../elements/animation/g-flip.html">
    <link rel="import" href="../../elements/animation/g-shake.html">
    <script src="../../../polymer/polymer.js"></script>
    <style>
      body {
        text-align: center;
        font-family: Helvetica, sans-serif;
      }
      div#target {
        display: inline-block;
        background-color: dimgrey;
        border-radius: 5px;
        padding: 5px 10px;
        margin: 50px;
        font-size: 30px;
        color: white;
      }
      div.animations > * {
        display: inline-block;
        background-color: darkgrey;
        border-radius: 5px;
        padding: 5px 10px;
        margin: 5px;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="target">animated!</div>
    <div class="animations">
      <g-bounce duration="1">bounce</g-bounce>
      <g-shake>shake</g-shake>
      <g-shake duration="Infinity">shake forever</g-shake>
      <g-flip>flip X</g-flip>
      <g-flip axis="y">flip Y</g-flip>
      <g-blink>blink</g-blink>
      <g-fadein>fade in</g-fadein>
    </div>
    <script>
      document.addEventListener('WebComponentsReady', function() {
        document.querySelector('.animations').addEventListener('click',
            function(e) {
              var animation = e.target;
              animation.target = target;
              animation.play();
            });
      });
    </script>
  </body>
</html>
